<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        /*.activated {*/
            /*color: red;*/
        /*}*/



    </style>
</head>
<body>

<div id="app">
    <!--<div @click="handleDivClick" -->
         <!--:class="{activated: isActivated}">hello world</div> -->

    <!--<div @click="handleDivClick"-->
         <!--:class="[activated, activatedOne]">hello world</div>-->
    <div :style="styleObj" @click="handleDivClick">Hello world</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            activated: "",
            activatedOne: "activated-one",
            styleObj: {
                color: "red"
            }
        },
        // methods: {
        //     handleDivClick: function () {
        //           //this.isActivated = !this.isActivated;
        //         if (this.activated === 'activated') {
        //             this.activated = ''
        //         } else {
        //             this.activated = 'activated'
        //         }
        //
        //
        //     }
        // }
        methods: {
            handleDivClick: function () {
                this.styleObj.color = this.styleObj.color === "black"?"red":"black"
            }
        }

    })
</script>
</body>
</html>